<template>
  <div class="profile-container">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <van-cell title="头像" is-link>
      <template #right-icon>
        <van-icon name="photo" />
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell title="昵称" is-link value="有点666" @click="name = true" />
    <van-cell title="性别" is-link value="女" @click="gender = true" />
    <van-cell
      title="生日"
      is-link
      value="2020-11-30"
      @click="birthday = true"
    />
    <!-- 昵称弹出层 -->
    <van-popup v-model="name" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar
        id="namevan-popup"
        title="标题"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-field
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
    </van-popup>
    <!-- 性别弹出层 -->
    <van-popup v-model="gender" position="bottom" :style="{ height: '200px' }">
      <!-- //选择性别 -->
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns"
        @cancel="onCancel"
        :default-index="2"
      />
    </van-popup>
    <!-- 生日弹出层 -->
    <van-popup
      v-model="birthday"
      position="bottom"
      :style="{ height: '200px' }"
    >
      <!-- //选择年龄 -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      gender: false,
      birthday: false,
      name: false,
      columns: ["女", "男"],
      //时间选择器
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //遮罩层
    onCancel() {
      //   Toast("取消");
      this.gender = false;
    }
  }
};
</script>
<style scoped lang="less">
.profile-container {
  .van-popup {
    width: 100%;
    height: 100%;
  }
  .van-cell {
    align-items: center;
  }
  .van-nav-bar {
    background-color: #3296fa;
    color: #fff;
    /deep/.van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }

  /deep/ #namevan-popup {
    background-color: #fff;
    color: #3296fa;
    .profile-container .van-nav-bar[data-v-385b29ff] .van-nav-bar__title {
      color: #000;
    }
  }
}
</style>
